<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>体检统计</title>
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">  
  <link rel="stylesheet" href="../css/medical-statistics.css">
  <script src="../JavaScript/Highcharts-9.3.2/code/highcharts.js"></script>
</head>
<body>
  <div class="kong11"></div>
  <div id="mulu">
    <div id="cateHead">
      <p><span>首页 / 数据统计 / </span>体检统计</p>
      <p>体检统计</p>
  </div>
  </div><br>
  
  <div class="row">
    
      <div class=" taocan">
        <br>
        <p>各套餐销量及收入分布</p>
      <div id="xuanxiangka">
          <div>
          <div onclick="dianji(this)">本月</div><div onclick="dianji(this)">本季度</div><div onclick="dianji(this)">本年</div>
          </div>
          <input type="text" value="2019-07-01至2019-07-07 " >
          <div>
            <select name="" id="">
              <option value="qg">全国</option>
              <option value="bj">北京</option>
              <option value="sh">上海</option>
              <option value="tj">天津</option>
              <option value="cq">重庆</option>
              <option value="gd">广东</option>
              <option value="js">江苏</option>
              <option value="zj">浙江</option>
              <option value="sd">山东</option>
            </select>
          </div>
      </div>
        <br>
       
        
      <div class="col-md-6">    
          <div id="container">
          </div>
      </div>
        <div class="col-md-6">    
          <div id="taocanshouru">
          </div>
        </div>
        
        <div id="list">
          <div id="bt">
            <span id="diyi">复工复产套餐</span>
            <span>入职体检男</span>
            <span>入职体检女</span>
            <span>公务员体检</span>
            <span>健康体检</span>
            <span>合计</span>
          </div>
          <div class="bt_cnt">
            <span class="diyi">20342份</span>
            <span>18723份</span>
            <span>14832份</span>
            <span>8763份</span>
            <span>5783份</span>
            <span><span class="sum">68443</span>份</span>
          </div>
          <div class="bt_cnt">
            <span class="diyi">343万元</span>
            <span>267万元</span>
            <span>207万元</span>
            <span>167万元</span>
            <span>125万元</span>
            <span><span class="sum">1109</span>万元</span>
          </div><br>
          
        </div>

      </div> 
<br>
      <div class=" taocan">
        <br>
        <p>各地区体检套餐销售</p>
        <div class="row">
          <div class="col-md-6">
            <div id="taocanNum"> </div>
          </div>
          <div class="col-md-6">
            <div id="taocanSum"> </div>
          </div>

        </div>
        

      </div>
      
  </div>
 
<div>
  <span class="foot1">大健康综合管理后台</span>
  <span class="foot2">版权所有:@大健康综合(集团)有限公司Meinian Onehealth Healthcare (Group)Co.</span>
  <span class="foot2">沪ICP备09017846号-3沪公网安备31010602006448号</span>
</div>
<script src="../JavaScript/index.js"></script>
    <script src="../JavaScript/data.js"></script>
    <script src="../JavaScript/utils.js"></script>
<script>

function dianji(obj){        
        
        $(obj).siblings().css({
          backgroundColor: 'white',
          color: '#1890FF'
        })
        $(obj).css({
          backgroundColor: '#1890FF',
          color: 'white'
        })
            
      }

      $(function () {
            $('#taocanSum').highcharts({
        
    chart: {
        type: 'bar'
    },
    title: {
        text: '各地区体检套餐销量收入 ',
        style:{fontSize:'16px'}
    },

    colors: ['#36CBCB'],
    xAxis: {
      categories: ['北京', '上海', '天津', '重庆', '广东', '安徽', '福建','江苏','浙江','山东','湖北','湖南','江西','广西','海南','河北','河南','陕西','山西','四川','云南','贵州','辽宁','吉林','黑龙江','新疆','西藏'],
       
      title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    credits: {
       enabled:false
    },
    
    series: [{
                    name: '各地区体检套餐销量',
                    showInLegend: false,
                    data: [400,200,100,200,20,220,260,240,330,400,450,320,120,140,155,166,177,180,190,220,250,110,270,240,250,260,270]
                }]
});
});
   
      $(function () {
            $('#taocanNum').highcharts({
        
    chart: {
        type: 'bar'
    },
    title: {
        text: '各地区体检套餐销量 ' ,
        style:{fontSize:'16px'}
    },

    colors: ['#1890FF'],
    xAxis: {
      categories: ['北京', '上海', '天津', '重庆', '广东', '安徽', '福建','江苏','浙江','山东','湖北','湖南','江西','广西','海南','河北','河南','陕西','山西','四川','云南','贵州','辽宁','吉林','黑龙江','新疆','西藏'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    credits: {
       enabled:false
    },
    
    series: [{
                    name: '各地区体检套餐销量',
                    showInLegend: false,
                    data: [300,200,100,200,20,220,250,240,330,400,450,320,120,140,155,166,177,180,190,200,220,110,230,240,250,260,270]
                }]
});
});
   
$(function(){
  $('#container').highcharts({
		chart: {
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false,
				type: 'pie'
		},
		title: {
				text: '套餐销量分布'
		},
    colors: ['#36CBCB','#4ECB73','#F04864','#FBD437','#1890FF'],
		tooltip: {
				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
				pie: {
						allowPointSelect: true,
						cursor: 'pointer',
            showInLegend: true,
            
						dataLabels: {
								enabled: true,
								format: '<b>{point.name}</b>: {point.percentage:.1f} %',
								style: {
										color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
								}
						}
				}
		},
    credits:{
     enabled: false // 禁用版权信息
},
		series: [{
				name: 'Brands',
				colorByPoint: true,
        size: '80%',
        innerSize: '60%',
				data: [{
						name: '入职体检男',
						y: 21,
						// sliced: true,
						// selected: true
				}, {
						name: '入职体检女',
						y: 22
				}, {
						name: '健康体检',
						y: 12
				}, {
						name: '公务员体检',
						y: 8
				}, {
						name: '复工复产',
						y: 30
				},]
		}]
});

    }) 
$(function(){
  $('#taocanshouru').highcharts({
		chart: {
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false,
				type: 'pie'
		},
		title: {
				text: '套餐销量收入分布'
		},
    colors: ['#36CBCB','#4ECB73','#F04864','#FBD437','#1890FF'],
		tooltip: {
				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
				pie: {
						allowPointSelect: true,
						cursor: 'pointer',
            showInLegend: true,
						dataLabels: {
								enabled: true,
								format: '<b>{point.name}</b>: {point.percentage:.1f} %',
								style: {
										color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
								}
						}
				}
		},
    credits:{
     enabled: false // 禁用版权信息
},
		series: [{
				name: 'Brands',
				colorByPoint: true,
        size: '80%',
        innerSize: '60%',
				data: [{
						name: '入职体检男',
						y: 21,
						// sliced: true,
						// selected: true
				}, {
						name: '入职体检女',
						y: 22
				}, {
						name: '健康体检',
						y: 12
				}, {
						name: '公务员体检',
						y: 8
				}, {
						name: '复工复产',
						y: 30
				},]
		}]
});

    }) 

</script>
</body>
</html>